<template>
  <div>
    <!-- <div class="headd">
      <Button type="primary" @click="tuihuo">申请退还押金</Button>
    </div> -->
    <Table border  width="1650" :columns="columns" @on-select="select" :data="order" size="large" no-data-text="你还没有订单，快点去购物吧">
         <template #img={row}>
            <img width="50" height="50" :src="row.img" alt="">
        </template>
         <template #createAt={row}>
          <div class="c">{{getTime(row.createAt)}}</div>
        </template>
         <template #fahuo={row}>
          <div class="c">{{getTime2(row.createAt)}}</div>
        </template>
           <template #action={row,index}>
          <Button :disabled="row.status > 0 " type="primary"   @click="edit(index)"> 修改地址</Button>
          <Button  :disabled='row.status!=0'  type="success" @click="tuihuo(row)">
            {{row.status === 0 ? '申请退还押金' : row.status === 1 ? '退押金申请中' : '已退还'}}
          </Button>
          <Button :disabled="row.status != 2 " type="primary"   @click="pingjia(index)"> 商品评价</Button>
        </template>
    </Table>
      <Modal v-model="modal" width="530">
        <p slot="header">
          <Icon type="edit"></Icon>
          <span>修改地址</span>
        </p>
        <div>
            <Form :model="formData" ref='formData' label-position="left" :label-width="100" >
              <FormItem label="收货地址" prop="address">
                <i-input v-model="formData.address" size="large" ></i-input>
              </FormItem>
            </Form>
        </div>
        <div slot="footer">
            <Button type="primary" size="large"  @click="editAction('formData')">修改</Button>
            <Button size="large"  @click="modal=false">取消</Button>
        </div>
    </Modal>
     <Modal v-model="modal1" width="530">
        <p slot="header">
          <Icon type="edit"></Icon>
          <span>商品评价</span>
        </p>
        <div>
            <Form :model="formData1" ref='formData1' label-position="left" :label-width="100" >
              <FormItem label="评价" prop="pj">
                <i-input v-model="formData1.pj" size="large" ></i-input>
              </FormItem>
              <FormItem label="等级" prop="pj">
               <!-- <Rate show-text v-model="formData1.pjdj" /> -->
        <Rate show-text allow-half v-model="formData1.pjdj">
            <span style="color: #f5a623">{{ formData1.pjdj }}</span>
        </Rate>
              </FormItem>
            </Form>
        </div>
        <div slot="footer">
            <Button type="primary" size="large"  @click="editAction1('formData')">确定</Button>
            <Button size="large"  @click="modal1=false">取消</Button>
        </div>
    </Modal>
    <div class="page-size">
      如有异议，请联系商家协商
      <!-- <Page :total="100" show-sizer></Page> -->
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  name: 'MyOrder',
  data () {
    return {
      order: [],
      listIndex: 0,
      listIndex1: 0,
      modal: false,
      modal1: false,
      goodsCheckList: [],
      arr: [],
      pj: [{
        username: 'pladj1',
        values: 3,
        content: '很好，价格又实惠，非常的满意',
        goods: '《灰色》高端 —博士',
        create_at: '2018-05-15 09:20',
        size: 'L'
      }],
      formData: {
        address: ''
      },
      formData1: {
        pj: ''
      },
      columns: [
        {
          title: '订单号',
          key: 'order_id',
          width: 180
        },
        {
          title: '图片',
          slot: 'img',
          width: 86
        },
        {
          title: '标题',
          key: 'title',
          width: 300
        },
        {
          title: '地址',
          key: 'address',
          width: 300
        },
        {
          title: '套餐',
          width: 198,
          key: 'package'
        },
        {
          title: '数量',
          key: 'count',
          width: 68
        },
        {
          title: '尺码',
          width: 68,
          key: 'size'
        },
        {
          title: '天数',
          width: 68,
          key: 'day'
        },
        {
          title: '租金',
          width: 68,
          key: 'zujing'
        },
        {
          title: '押金',
          width: 68,
          key: 'yajin'
        },
        {
          title: '下单时间',
          width: 200,
          slot: 'createAt'
        },
        {
          title: '发货时间',
          width: 240,
          slot: 'fahuo',
          align: 'center'
        },
        {
          title: '状态',
          width: 160,
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              params.row.status === 0 ? '已付款' : params.row.status === 1 ? '退押金申请中' : `已退押金`
            ]);
          }
        },
        {
          title: '退还金额',
          width: 160,
          key: 'tui',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              params.row.status === 0 ? '暂未申请' : params.row.status === 1 ? '退押金申请中' : params.row.tui
            ]);
          }
        },
        {
          title: '扣押金原因',
          width: 160,
          key: 'tuitxt',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              params.row.status === 0 ? '暂未申请' : params.row.status === 1 ? '退押金申请中' : params.row.tuitxt
            ]);
          }
        },
        {
          title: '操作',
          width: 260,
          slot: 'action',
          fixed: 'right'
        }
      ]
    };
  },
  computed: {
    ...mapState(['orderList', 'userRamks'])
  },
  created () {
    this.arr = JSON.parse(localStorage.getItem('userorder'));
    const usersorder = this.arr.filter((item) => {
      return item.user === localStorage.getItem('loginInfo');
    });
    this.CHANGE_ORDER(usersorder);
    this.order = JSON.parse(JSON.stringify(this.orderList));
  },
  methods: {
    ...mapMutations(['CHANGE_ORDER', 'SET_PJ']),
    edit (index) {
      this.modal = true;
      this.listIndex = index;
      this.formData = JSON.parse(JSON.stringify(this.order[index]));
    },
    pingjia (index) {
      this.modal1 = true;
      this.listIndex1 = index;
      this.formData1 = JSON.parse(JSON.stringify(this.order[index]));
    },
    editAction (name) {
      if (this.formData.address !== '') {
        this.$Message.success('修改成功');
        this.order[this.listIndex] = JSON.parse(JSON.stringify(this.formData));
        const id = [];
        this.arr.filter((item) => {
          id.push(item.order_id);
        });
        const index = id.indexOf(this.order[this.listIndex].order_id);
        this.arr[index] = JSON.parse(JSON.stringify(this.formData));
        localStorage.setItem('userorder', JSON.stringify(this.arr));
        this.modal = false;
        this.CHANGE_ORDER(this.order);
        this.order = JSON.parse(JSON.stringify(this.orderList));
      }
    },
    editAction1 (name) {
      if (this.formData1.pj !== '') {
        this.$Message.success('评价成功');
        this.order[this.listIndex1] = JSON.parse(JSON.stringify(this.formData1));
        const id = [];
        this.arr.filter((item) => {
          id.push(item.order_id);
        });
        const index = id.indexOf(this.order[this.listIndex].order_id);
        this.arr[index] = JSON.parse(JSON.stringify(this.formData1));
        localStorage.setItem('userorder', JSON.stringify(this.arr));
        this.modal1 = false;
        this.CHANGE_ORDER(this.order);
        const userpj = {
          username: this.formData1.user,
          values: this.formData1.pjdj,
          content: this.formData1.pj,
          goods: this.formData1.package,
          create_at: new Date().getTime(),
          size: this.formData1.size,
          pjid: this.formData1.order_id
        };
        const pjID = this.userRamks.map((item) => {
          return item.pjid;
        });
        const pjIndex = pjID.indexOf(userpj.pjid);
        let pjList = JSON.parse(JSON.stringify(this.userRamks));
        if (pjIndex > -1) {
          pjList[pjIndex] = userpj;
          this.SET_PJ(pjList);
        } else {
          pjList.push(userpj);
          this.SET_PJ(pjList);
        }
        this.order = JSON.parse(JSON.stringify(this.orderList));
      }
    },
    select (selection, row) {
      this.goodsCheckList = selection;
    },
    tuihuo (row) {
      let newarr = JSON.parse(JSON.stringify(this.arr));
      this.arr.filter((item, index) => {
        if (row.order_id === item.order_id) {
          newarr[index].status = 1;
        }
      });
      this.CHANGE_ORDER(newarr);
      localStorage.setItem('userorder', JSON.stringify(newarr));
      this.arr = newarr;
      this.order = JSON.parse(JSON.stringify(this.orderList));
      this.$Message.success('申请成功');
    },
    ok () {
      const chckelist = this.goodsCheckList.map(item => {
        return item.order_id;
      });
      let newarr = JSON.parse(JSON.stringify(this.arr));
      this.arr.filter((item, index) => {
        if (chckelist.indexOf(item.order_id) > -1) {
          newarr[index].status = 1;
        }
      });
      this.CHANGE_ORDER(newarr);
      localStorage.setItem('userorder', JSON.stringify(newarr));
      this.arr = newarr;
      this.order = JSON.parse(JSON.stringify(this.orderList));
      /* setTimeout(() => {
        this.tuisuccess();
      }, 5000); */
    },
    tuisuccess () {
      const fail = this.orderList.filter(item => {
        return item.status !== 1;
      });
      this.CHANGE_ORDER(fail);
      this.$Message.success('退款成功');
      this.order = JSON.parse(JSON.stringify(this.orderList));
    },
    add0 (m) { return m < 10 ? '0' + m : m; },
    getTime (q) {
      var time = new Date(q);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
    },
    getTime2 (q) {
      var time = new Date(q);
      time.setDate(time.getDate() + 2);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
    }
  }
};
</script>

<style scoped>
.page-size {
  margin: 15px 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
 .ivu-table .wfk{
  color:red
}
 .ivu-table .yfk{
  color:green
}
.headd {
  margin-bottom: 30px;
}
</style>
